<template>
	<view>
		<view class="cart-container">
			<view class="item" v-for="(item,index) in cartList" :key="item.id">
				<u-checkbox :value="item.checked === 1" shape="circle" active-color="darkred" :disabled="editing"
					@change="onSingleChange($event,item.product_id)">
				</u-checkbox>
				<view class="right">
					<u-swipe-action :options="swipeActionOptions" @click="del(index,0)" @content-click="cctv(item)">
						<view class="content">
							<u-image width="176rpx" height="176rpx" :src="item.list_pic_url"></u-image>
							<view class="info">
								<text class="name">{{item.goods_name}}</text>
								<view class="price-count">
									<text class="price">¥{{item.market_price.toFixed(2)}}</text>
									<text class="count">x{{item.number}}</text>
								</view>

								<!-- 步进器 -->
								<view v-show="editing">
									<view class="stepper">
										<u-number-box :value="item.number" @minus="add(item,-1)" @plus="add(item,1)">
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action>
				</view>
			</view>
		</view>

		<!-- 编辑 -->
		<view class="edit-container" v-show="cartList.length">
			<text>累计共{{checkedGoodsCount}}件商品，可点击</text>
			<u-button :type="editing ? 'error' : 'success'" size="mini" :customStyle="{margin:'0 10rpx'}"
				@click="handleToggle" throttle-time="0">{{editing ? '完成编辑' : '编辑'}} </u-button>
			<text>按钮进行商品数量修改</text>
		</view>

		<!-- 全选 -->
		<view class="buy-container">
			<view class="left">
				<u-checkbox :value="goodsCount === checkedGoodsCount" active-color="darkred" shape="circle"
					:disabled="editing" @change="onAllChange">全选
				</u-checkbox>
			</view>
			<view class="right">
				<view class="total-price-contaier">
					<text class="txt">合计：</text>
					<text class="red-mini">¥</text>
					<text class="red">{{checkedGoodsPrice}}</text>
					<text class="red-mini">.00</text>
				</view>

				<u-button shape="circle"
					:custom-style="{background: 'linear-gradient(to right,#ff6034,#ee0a24)',color:'#fff'}">立即购买
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		checkToken
	} from '../../util/router.js'
	export default {
		data() {
			return {
				allChecked: true, // 全选复选框
				swipeActionOptions: [{
					text: '删除',
					style: {
						backgroundColor: 'red'
					}
				}],
				editing: false, // 是否正在编辑中 ,如果为真，就是在编辑中
				cartList: [], // 商品列表
				goodsCount: 0, // 商品总件数
				checkedGoodsCount: 0, // 选中的商品总件数
				checkedGoodsPrice: 0, // 选中的商品总价格

			}
		},
		onShow() {
			checkToken({
				HasTokenCb: () => {
					this.$request({
						url: 'cart/index',
						successCb: res => {
							console.log(res)
							this.cartFn(res)
						}
					})
				},
				pagePath: '../cart/cart'
			})
		},
		methods: {
			// 页面渲染逻辑
			cartFn(data) {
				let {
					cartList,
					cartTotal
				} = data
				this.cartList = cartList
				let {
					goodsCount,
					checkedGoodsCount,
					checkedGoodsAmount
				} = cartTotal
				this.goodsCount = goodsCount
				this.checkedGoodsCount = checkedGoodsCount
				this.checkedGoodsPrice = checkedGoodsAmount
			},
			handleToggle(item) {
				this.editing = !this.editing
			},
			cctv(item) {
				if (this.editing) {
					return
				}
				this.$request({
					url: 'cart/checked',
					method: 'POST',
					data: {
						isChecked: item.checked == 1 ? 0 : 1,
						productIds: item.product_id
					},
					successCb: res => {
						// 重新渲染
						this.cartFn(res)
					}
				})
			},
			del(idx) {
				this.$request({
					url: 'cart/delete',
					method: 'POST',
					data: {
						productIds: this.cartList[idx].product_id.toString()
					},
					successCb: res => {
						console.log(res);
						this.cartFn(res)
					}
				})
			},
			add(item, val) {
				console.log(item, val);
				item.number += val
				this.$request({
					url: 'cart/update',
					method: "POST",
					data: {
						goodsId: item.goods_id,
						id: item.id,
						number: item.number,
						productId: item.product_id
					},
					successCb: res => {
						console.log(res);
						this.cartFn(res)
					}
				})
			},
			// 单个复选框
			onSingleChange(e, product_id) {
				console.log(e)
				console.log(product_id)
				// e.value 复选框点击后的真实的值，布尔值

				this.$request({
					url: 'cart/checked',
					method: 'POST',
					data: {
						isChecked: e.value ? 1 : 0,
						productIds: product_id.toString()
					},
					successCb: res => {
						// 重新渲染
						this.cartFn(res)
					}
				})
			},
			// 全选
			onAllChange(e) {
				let productIdArr = []
				this.cartList.forEach(el => {
					productIdArr.push(el.product_id)
				})
				console.log(productIdArr)

				this.$request({
					url: 'cart/checked',
					method: 'POST',
					data: {
						isChecked: e.value ? 1 : 0,
						productIds: productIdArr.join(',') // 所有列表项的id组成的字符串
					},
					successCb: res => {
						// 重新渲染
						this.cartFn(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.cart-container {
		padding: 20rpx 20rpx 200rpx;

		.item {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #ccc;

			.right {
				flex: 1;
				overflow: hidden;
				padding: 16rpx 0;
				background-color: #fafafa;

				.content {
					display: flex;
					align-items: center;
					background-color: #fafafa;
					padding: 0 32rpx;

					.info {
						flex: 1;

						.name {
							display: inline-block;
							font-size: 36rpx;
							margin-bottom: 40rpx;
						}

						.price-count {
							display: flex;
							justify-content: space-between;
							align-items: baseline;

							.price {
								font-size: 32rpxs;
							}

							.count {
								font-size: 26rpx;
								color: #969799;
							}
						}

						.stepper {
							display: flex;
							justify-content: flex-end;
							margin-top: 20rpx;
						}
					}
				}
			}
		}
	}

	.edit-container {
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		bottom: calc(100rpx + var(--window-bottom));
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 24rpx;
		background-color: #fff7cc;
		color: #f56723;
		font-size: 24rpx;
	}

	.buy-container {
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		bottom: var(--window-bottom);
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;

		.left {
			height: 100%;
			display: flex;
			align-items: center;
		}

		.right {
			height: 100%;
			display: flex;
			align-items: center;

			.total-price-contaier {
				display: flex;
				height: 100%;
				align-items: flex-end;
				margin-right: 20rpx;
				margin-top: -50rpx;

				.txt {
					font-size: 28rpx;
					color: #000;
				}

				.red {
					font-size: 40rpx;
					color: red;
				}

				.red-mini {
					font-size: 28rpx;
					color: red;
				}
			}
		}

	}
</style>
